<template>
  <view class="area_box">
    <view :key="item.id" class="area_item" @click.stop="switchNav(index)" v-for="(item, index) in tabsItem"
      :class="{ addBlock: currIndex === index }">
      {{ item.name }}
      <!-- <view class="text" :class="{ active: currIndex === index }"></view> -->
    </view>
  </view>
</template>
<script>
export default {
  name: 'MyTabs',
  props: {
    tabsItem: {
      type: Array,
      default() {
        return [
          { id: 0, name: '车型介绍', },
          { id: 1, name: '技术参数', },
          { id: 2, name: '详情配置', },
        ]
      },
    },
  },
  data() {
    return {
      currIndex: 0,
    }
  },
  methods: {
    switchNav(i) {
      this.currIndex = i
      this.$emit('click', i)
    },
  },
}
</script>
<style scoped lang="scss">
.area_box {
  padding: 10px 40rpx 8px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  color: #222;

  .area_item {
    font-size: 34rpx;
    padding: 20rpx 4rpx 9rpx;
    border-bottom: 2rpx solid #fff;
    // .text {
    //   padding: 20rpx 4rpx 6rpx;
    //   border-bottom: 2rpx solid #fff;
    //   &.active {
    //     // background-color: $theme-color;
    //     font-weight: bold;
    //     border-bottom: 2rpx solid #333;
    //   }
    //   // &.borderLeft {
    //   // border-left: $theme-color 1px solid;
    //   // }
    // }
  }
}

.addBlock {
  font-weight: 600 !important;
  border-bottom: 2rpx solid #222 !important;
}
</style>
